<template>
    <li :class="{ completed: todo.done, editing: editing }" class="todo">
        <div class="view">
            <input :checked="todo.done" class="toggle" type="checkbox" @change="toggleTodo(todo)">
            <label @dblclick="editing = true" v-text="todo.text" />
            <button class="destroy" @click="deleteTodo(todo)" />
        </div>
        <input v-show="editing" v-focus="editing" :value="todo.text" class="edit" @keyup.enter="doneEdit"
            @keyup.esc="cancelEdit" @blur="doneEdit">
    </li>
</template>

<script>
export default {
    name: 'Todo',
    directives: {
        focus(el, { value }, { context }) {
            if (value) {
                context.$nextTick(() => {
                    el.focus()
                })
            }
        }
    },
    props: {
        todo: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data() {
        return {
            editing: false
        }
    },
    methods: {
        deleteTodo(todo) {
            this.$emit('deleteTodo', todo)
        },
        editTodo({ todo, value }) {
            this.$emit('editTodo', { todo, value })
        },
        toggleTodo(todo) {
            this.$emit('toggleTodo', todo)
        },
        doneEdit(e) {
            const value = e.target.value.trim()
            const { todo } = this
            if (!value) {
                this.deleteTodo({
                    todo
                })
            } else if (this.editing) {
                this.editTodo({
                    todo,
                    value
                })
                this.editing = false
            }
        },
        cancelEdit(e) {
            e.target.value = this.todo.text
            this.editing = false
        }
    }
}
</script>
